<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js过渡类名完整示例</title>
</head>
<body>
<style>
    /* 
    Vue.js过渡类名完整说明：
    
    1. v-enter-from: 进入过渡的开始状态（Vue 3中是v-enter，Vue 2中是v-enter）
    2. v-enter-active: 进入过渡的生效状态
    3. v-enter-to: 进入过渡的结束状态
    4. v-leave-from: 离开过渡的开始状态（Vue 3中是v-leave，Vue 2中是v-leave）
    5. v-leave-active: 离开过渡的生效状态
    6. v-leave-to: 离开过渡的结束状态
    
    注意：在Vue 3中，类名从v-enter和v-leave改为v-enter-from和v-leave-from，
    但为了向后兼容，v-enter和v-leave仍然可用。
    */

    /* 设置容器样式 */
    .demo-container {
        margin: 20px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    /* 过渡元素的基本样式 */
    .transition-box {
        width: 200px;
        height: 100px;
        margin: 20px 0;
        background-color: #42b983;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }

    /* 
    v-enter-from: 进入过渡的起始状态（元素即将进入）
    opacity: 0; 使元素完全透明
    transform: scale(0.5) translateY(-50px); 将元素缩小到原来的一半大小，并向上移动50像素
    */
    .v-enter-from {
        opacity: 0;  /* 完全透明 */
        transform: scale(0.5) translateY(-50px);  /* 缩小并上移 */
    }

    /* 
    v-enter-active: 进入过渡的生效状态（在整个进入过渡期间应用）
    transition: all 0.5s ease-out; 定义所有属性在0.5秒内以ease-out缓动函数进行过渡
    */
    .v-enter-active {
        transition: all 0.5s ease-out;  /* 0.5秒缓出过渡 */
    }

    /* 
    v-enter-to: 进入过渡的结束状态（元素进入完成）
    opacity: 1; 使元素完全不透明
    transform: scale(1) translateY(0); 将元素恢复到正常大小，并回到原始位置
    */
    .v-enter-to {
        opacity: 1;  /* 完全不透明 */
        transform: scale(1) translateY(0);  /* 正常大小并回到原位 */
    }

    /* 
    v-leave-from: 离开过渡的起始状态（元素即将离开）
    opacity: 1; 元素处于完全不透明状态
    transform: scale(1) translateY(0); 元素处于正常大小和位置
    */
    .v-leave-from {
        opacity: 1;  /* 完全不透明 */
        transform: scale(1) translateY(0);  /* 正常大小并处于原位 */
    }

    /* 
    v-leave-active: 离开过渡的生效状态（在整个离开过渡期间应用）
    transition: all 0.5s ease-in; 定义所有属性在0.5秒内以ease-in缓动函数进行过渡
    */
    .v-leave-active {
        transition: all 0.5s ease-in;  /* 0.5秒缓入过渡 */
    }

    /* 
    v-leave-to: 离开过渡的结束状态（元素离开完成）
    opacity: 0; 使元素完全透明
    transform: scale(0.5) translateY(50px); 将元素缩小到原来的一半大小，并向下移动50像素
    */
    .v-leave-to {
        opacity: 0;  /* 完全透明 */
        transform: scale(0.5) translateY(50px);  /* 缩小并下移 */
    }

    /* 自定义过渡名称示例 */
    /* 
    slide-enter-from: 自定义滑入过渡的起始状态
    opacity: 0; 使元素完全透明
    transform: translateX(-100%); 将元素向左移动其宽度的100%，使其完全移出视图
    */
    .slide-enter-from {
        opacity: 0;  /* 完全透明 */
        transform: translateX(-100%);  /* 向左移出视图 */
    }

    /* 
    slide-enter-active: 自定义滑入过渡的生效状态
    transition: all 0.3s ease; 定义所有属性在0.3秒内以ease缓动函数进行过渡
    */
    .slide-enter-active {
        transition: all 0.3s ease;  /* 0.3秒缓动过渡 */
    }

    /* 
    slide-leave-from: 自定义滑出过渡的起始状态
    opacity: 1; 元素处于完全不透明状态
    transform: translateX(0); 元素处于原始位置
    */
    .slide-leave-from {
        opacity: 1;  /* 完全不透明 */
        transform: translateX(0);  /* 处于原始位置 */
    }

    /* 
    slide-leave-active: 自定义滑出过渡的生效状态
    transition: all 0.3s ease; 定义所有属性在0.3秒内以ease缓动函数进行过渡
    */
    .slide-leave-active {
        transition: all 0.3s ease;  /* 0.3秒缓动过渡 */
    }

    /* 
    slide-leave-to: 自定义滑出过渡的结束状态
    opacity: 0; 使元素完全透明
    transform: translateX(100%); 将元素向右移动其宽度的100%，使其完全移出视图
    */
    .slide-leave-to {
        opacity: 0;  /* 完全透明 */
        transform: translateX(100%);  /* 向右移出视图 */
    }

    /* 按钮样式 */
    button {
        padding: 10px 15px;
        margin: 5px;
        background-color: #409eff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    button:hover {
        background-color: #66b1ff;
    }
</style>

<div id="app">
    <div class="demo-container">
        <h2>Vue.js过渡类名完整示例</h2>
        
        <div>
            <button @click="showDefault = !showDefault">切换默认过渡</button>
            <button @click="showSlide = !showSlide">切换滑动过渡</button>
        </div>

        <!-- 默认过渡示例 -->
        <div>
            <h3>默认过渡（使用v-前缀）</h3>
            <transition>
                <div v-if="showDefault" class="transition-box">
                    默认过渡元素
                </div>
            </transition>
        </div>

        <!-- 自定义过渡名称示例 -->
        <div>
            <h3>自定义过渡名称（使用slide-前缀）</h3>
            <transition name="slide">
                <div v-if="showSlide" class="transition-box">
                    滑动过渡元素
                </div>
            </transition>
        </div>
    </div>

    <div class="demo-container">
        <h2>过渡类名说明</h2>
        <ul>
            <li><strong>v-enter-from</strong>: 进入过渡的开始状态（元素即将进入）</li>
            <li><strong>v-enter-active</strong>: 进入过渡的生效状态（在整个进入过渡期间应用）</li>
            <li><strong>v-enter-to</strong>: 进入过渡的结束状态（元素进入完成）</li>
            <li><strong>v-leave-from</strong>: 离开过渡的开始状态（元素即将离开）</li>
            <li><strong>v-leave-active</strong>: 离开过渡的生效状态（在整个离开过渡期间应用）</li>
            <li><strong>v-leave-to</strong>: 离开过渡的结束状态（元素离开完成）</li>
        </ul>
        <p><strong>注意</strong>: 在Vue 3中，类名从v-enter和v-leave改为v-enter-from和v-leave-from，但为了向后兼容，旧的类名仍然可用。</p>
    </div>
</div>

<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const vm = Vue.createApp({
        data() {
            return {
                showDefault: true,
                showSlide: true
            }
        }
    }).mount('#app')
</script>
</body>
</html>